@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Serif+SC:wght@400;700&display=swap');
@font-face {
    font-family: 'MaShanZheng-Regular';
    src: url('~@/assets/MaShanZheng-Regular.ttf') ;
    font-weight: 400;
    font-style: normal;
  }

  .journal {
    margin: 20px;
    width: 100%;
    max-width: 960px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    background-image: url("../多彩磨砂.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; /* 确保背景图像在元素中心 */
    display: flex;
    justify-content: center;
    align-items: center;
}


.journal-header {
    text-align: center;
    font-family: 'Pacifico', cursive;
    color: #237d4a;
    font-size: 2.5em;
    margin-bottom: 20px;
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(-5px); }
    50% { transform: translateY(10px); }
}

.journal-entry {
    display: flex;
}

.journal-entry:hover {
    transform: scale(1.03); /* Slight scale for interactive feedback */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.images-container {
    background-image: url('../相框.jpg');
    width: 300px; /* 设置容器宽度 */
    height: 400px; /* 设置容器高度 */
    background-size: contain; /* 保证图片完整显示并按比例适应容器 */
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px; /* 减小向右的外边距 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.image {
    border-radius: 10px; /* 设置图片的圆角为 10px */
    display: block; /* 将图片设置为块级元素 */
    object-fit: contain; /* 保持图片的宽高比,并填充容器 */
    border-radius: 10px; /* 设置图片的圆角为 10px */
}


.text {
    width: 500px;
    height: auto;
    background: url('../yellow.jpg') no-repeat center center; 
    padding: 10px;
    background-size: cover;
    font-family: 'Pacifico', cursive; /* 使用Pacifico字体 */
    text-align: left;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.text h2, .text p {
    margin: 5px 0;
}

.title
{
    font-family: 'Noto Serif SC', serif; /* 对特定元素使用衬线字体 */
    font-size: 50px;
}

.des{
    font-family: 'Noto Sans SC', sans-serif; /* 应用无衬线字体 */
    font-size: large;
}

.date{
    font-size: 20px;
    margin-bottom: 50px;
}



.tags {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

.tag {
    background: linear-gradient(to right, #aa96eb, #d1cf79);
    color: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin: 20px;
    font-size: 0.5em;
    font-style: italic;
    font-weight: 200;
    font-family: 'MaShanZheng-Regular';
    opacity: 0.7;
}


.button-container {
    display: flex;
    justify-content: center;
    gap: 100px;
    padding: 20px 0; /* 在按钮区域上下添加空间 */
  }
  

.button {
    background-color: #93dfdc;
    color: white;
    border: none;
    padding: 8px 16px; /* 减少内边距以缩小按钮 */
    font-size: 0.8em; /* 减小字体大小 */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #cbd374;
}
